<template>
	<view>
		<view class="media-container">
			<jade-image-upload :list="media" :control="control" :columnType="columnType" :maxCount="maxCount"
				:maxListShowCount="maxListShowCount" :compressSize="compressSize" :compressQuality="compressQuality"
				:compressWidth='compressWidth' :imageSize="imageSize" :sourceType="sourceType" @chooseFile="chooseFile"
				@imgDelete="mediaDelete">
			</jade-image-upload>
		</view>

		<view class="media-container"
			style="background-color: white; position: absolute; top:130px; width:100%; height:auto">
			<!-- v-if="media.length" -->
			<view v-if="media.length > 2" @click="clicktoAll()" class="pcs" style="text-align: center;">
				查看或上传全部({{media.length}})</view>
			<view class="VIN-code-box-class">
				<view class="VIN-code-text-class">VIN码</view>
				<view class="VIN-code-input-box">
					<input class="input-send-car-class" type="number" @input="inputPhone" :value="inputValueVIN"
						placeholder="请输入" placeholder-class="pcs">
					<image class="VIN-code-image-class" src="@/static/camera.png" @click="cameraClick()"></image>
				</view>
			</view>

			<view class="text-view">车辆信息</view>
			<uniSendCar :title="'品牌车型'" :isShowLeftImg='true' :isShowInput='false' :selectName="selectBrand"
				@selectClick='selectClick' :inta="1"></uniSendCar>
			<view class="line" />
			<uniSendCar :title="'外观颜色'" :isShowLeftImg='true' :isShowInput="false" :selectName="selectColor"
				@selectClick='selectClick' :inta="2"></uniSendCar>
			<view class="line" />
			<uniSendCar :title="'上牌时间'" :isShowLeftImg='true' :isShowInput='false' :selectName="selectUpTime"
				@selectClick='selectClick' :inta="3"></uniSendCar>
			<view class="line" />
			<uniSendCar :title="'车辆所在地'" :isShowLeftImg='true' :isShowInput='false' :selectName="selectLocation"
				@selectClick='selectClick' :inta="4"></uniSendCar>
			<view class="line" />
			<uniSendCar :title="'使用性质'" :isShowLeftImg='true' :isShowInput='false' :selectName="selectShiyongxingzhi"
				@selectClick='selectClick' :inta="12"></uniSendCar>
			<view class="line" />
			<uniSendCar :title="'车主来源'" :isShowLeftImg='true' :isShowInput='false' :selectName="selectChezhulaiyuan"
				@selectClick='selectClick' :inta="13"></uniSendCar>
			<view class="line" />
			<uniSendCar :title="'表显里程'" :isShowLeftImg='true' :unitName="'万公里'" :inta="5" @meInputDigit='meInputDigit'
				:isDigit="true">
			</uniSendCar>
			<view class="line" />
			<uniSendCar :title="'售价'" :isShowLeftImg='true' :unitName="'万元'" :inta="6" @meInputDigit='meInputDigit'
				:isDigit="true">
			</uniSendCar>
			<view class="line" />
			<uniSendCar :title="'上牌地'" :isShowLeftImg='false' :isShowInput="false" :inta="7"
				:selectName="selectUpLocation" @selectClick='selectClick'></uniSendCar>
			<view class="line" />
			<uniSendCar :title="'过户次数'" :isShowLeftImg='false' :unitName="'次'" :inta="8" @meInputPhone='meInputPhone'>
			</uniSendCar>
			<view class="line" />
			<uniSendCar :title="'钥匙数量'" :isShowLeftImg='false' :unitName="'把'" :inta="9" @meInputPhone='meInputPhone'>
			</uniSendCar>
			<view class="line" />
			<uniSendCar :title="'保险到期时间'" :isShowLeftImg='false' :isShowInput='false' :inta="10"
				@selectClick='selectClick' :selectName="selectBaoxianTime">
			</uniSendCar>
			<view class="line" />
			<uniSendCar :title="'年检到期时间'" :isShowLeftImg='false' :isShowInput='false' :inta="11"
				@selectClick='selectClick' :selectName="selectNianjianTime">
			</uniSendCar>
			<view class="line" />
			<view class="chekuang-miaoshu-text-class">车况描述</view>
			<textarea class="text-tare-view-class" @input="inputPhoneRefer" placeholder="请输入"
				placeholder-class="textarea-pcs" />
			<view class="tijiao-btn-send-car-source" @click="sendCarBtn()">提交</view>

		</view>
		<uni-popup class="" ref="send_car_source_popup" :animation="true" type="bottom" @maskClick="maskClickpopup()"
			:safeArea="true" @change="changePopup()">
			<view class="send-car-xingzhi_popup">
				<view class="shiyong-xingzhi-title-view-class">使用性质</view>
				<view class="selected-view-box">
					<scroll-view scroll-x="true" class="selected-header-box">
						<view v-for="(item,index) in xingzhiDataList" :key="index" class="header_item_box">
							<view
								:class="isSelectXingzhiId==index?'send-car-xingzhi_popup-item-class-select':'send-car-xingzhi_popup-item-class'"
								@click="xingzhiClick(index)">{{item.name}}</view>
							<view class="flex1"
								v-if="xingzhiDataList.length<2?(index+1)==xingzhiDataList.length?true:false:false">
							</view>
							<view class="flex1"
								v-if="xingzhiDataList.length<3?(index+1)==xingzhiDataList.length?true:false:false">
							</view>
							<view class="flex1"
								v-if="xingzhiDataList.length<4?(index+1)==xingzhiDataList.length?true:false:false">
							</view>
						</view>
					</scroll-view>
				</view>
				<view class="shiyong-xingzhi-btn-view-class" @click="xingzhiBtnClick()">确定</view>
			</view>
		</uni-popup>
		<uni-popup class="" ref="send_car_source_chezhulaiyuan_popup" :animation="true" type="bottom"
			@maskClick="maskClickpopup()" :safeArea="true" @change="changePopup()">
			<view class="send-car-xingzhi_popup">
				<view class="shiyong-xingzhi-title-view-class">车主来源</view>
				<view class="shiyong-xingzhi-view-box">
					<view v-for="(item,index) in laiyuanDataList" :key="index">
						<view
							:class="isSelectLaiyuanId==index?'send-car-xingzhi_popup-item-class-select':'send-car-xingzhi_popup-item-class'"
							@click="laiyuanClick(index)">{{item.name}}</view>
					</view>
				</view>

				<view class="shiyong-xingzhi-btn-view-class" @click="laiyuanBtnClick()">确定</view>
			</view>
		</uni-popup>
		<liu-calendar-date ref="calendar1" @checked='getDate1'></liu-calendar-date>
		<uni-calendar 
			ref="calendar"
			:insert="false"
			@confirm="getDate"
			 />
	</view>


</template>

<script>
	import uniSendCar from '@/secondhandCar/uniSendCar/uniSendCar.vue'
	import {
		upMeCarSource,
		getCardModelInfo,
		getNatureUse,
		getCarOwnerSource
	} from '@/api/secondhandCar.js'
	import {
		uploadPictures
	} from '@/api/base.js'
	import {
		commonBrandsAdd
	} from '@/api/brand.js'
	export default {
		components: {
			uniSendCar
		},
		data() {
			return {
				//时间选择器
				selectClickInta: 0,


				//xingzhi data
				xingzhiDataList: [],
				isSelectXingzhiId: 0,
				//chezhulaiyuan data
				laiyuanDataList: [],
				isSelectLaiyuanId: 0,


				//ui展示相关字段
				selectBrand: '请选择车型',
				selectColor: '请选择外观颜色',
				selectUpTime: '请选择',
				selectLocation: '请选择',
				selectShiyongxingzhi: '请选择',
				selectUpLocation: '请选择',
				selectBaoxianTime: '请选择',
				selectNianjianTime: '请选择',
				selectChezhulaiyuan: '请选择',



				//上传图片相关变量
				control: true,
				columnType: 'other',
				maxCount: 20,
				maxListShowCount: 2,
				compressSize: 30,
				imageSize: 30,
				compressQuality: 0.8,
				compressWidth: 375,
				sourceType: ['album'],



				imageID: 0,
				uploadTask: null,
				media: [], //数据源

				//VIN 变量
				VINCode: '',
				//描述的输入内容
				referContent: '',
				data: {}, //真实传递的对象值
				//发布所需的data 该对象为了数据清空所准备
				objectData: {
					version_id:'',
					users_id: '', //是String用户
					cover_url: [], //否Object图集
					vin_code: '', //否Stringvin码
					brand_id: '', //是String品牌
					series_one_id: '', //是String一级车系id
					series_two_id: '', //是String二级车系id
					model_one_id: '', //是String一级车型id
					model_two_id: '', //是String二级车型id
					custom_name: '', //自定义车型name
					appearance_name: '', //否String外观颜色
					appearance_color: '', //否String外观颜色色号
					interior_name: '', //否String内饰颜色
					interior_color: '', //否String内饰颜色色号
					registration_time: '', //是String上牌时间
					where_province_id: '', //是String车辆所在地省id
					where_city_id: '', //是String车辆所在地市id
					mileage: '', //是String里程数 万
					price: '', //是String售价
					registration_province_id: '', //否String上牌地省id
					registration_city_id: '', //否String上牌地市id
					transfer_ownership: '', //是String过户次数
					key: '', //是String钥匙数量
					nature_id: '', //是String使用性质id
					inspect_time: '', //否String上一次年检
					insure_time: '', //否String保险到期时间
					describe: '', //否String描述
					owner_source_id: '' //否String车主来源id 
				},

				inputValueVIN: '', //VIN码

				isCustomModel: false //是否是自定义车型返回的数据
			};
		},
		onLoad(options) {
			const value = uni.getStorageSync('login')
			this.data = this.objectData
			if (value) {
				this.data.users_id = value.id
			} else {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			}
			this.objectData.model_two_id = options.model_id
			this.selectBrand = options.model_name


			var that = this
			getNatureUse().then(res => {
				that.$utils.log("打印使用性质数据  " + JSON.stringify(res))
				that.xingzhiDataList = res.data
			})
			getCarOwnerSource().then(res => {
				that.$utils.log("打印车主来源数据  " + JSON.stringify(res))
				that.laiyuanDataList = res.data
			})

			if (JSON.stringify(options) == '{}') {
				return
			}

			let param = {}
			if (options.model_id) {
				param = {
					"model_id": options.model_id,
					"state": "2"
				}
			} else {
				param = {
					"car_search_id": options.car_search_id,
					"state": "2"
				}
			}
			getCardModelInfo(param)
				.then(res => {
					let code = res.code
					let data = res.data
					if (code == 0) {
						this.objectData.series_one_id = data.series_one_id
						this.objectData.series_two_id = data.series_two_id
						this.objectData.brand_id = data.brand_id
						this.objectData.model_one_id = data.model_one_id
					}
				})

		},
		methods: {
			//点击相机进行拍照识别VIN码
			cameraClick() {
				this.$utils.log("点击相机进行拍照识别VIN码")
				uni.navigateTo({
					url: '/pages/home/secondhandCar/customCamera/customCamera'
				})
			},
			laiyuanBtnClick() {
				if (this.laiyuanDataList.length > 0) {
					this.data.owner_source_id = this.laiyuanDataList[this.isSelectLaiyuanId].id
					this.selectChezhulaiyuan = this.laiyuanDataList[this.isSelectLaiyuanId].name
				}
				this.$refs.send_car_source_chezhulaiyuan_popup.close()
				this.$utils.log("dayin xuanze de laiyuan " + this.xingzhiDataList[this.isSelectLaiyuanId].name)
			},
			laiyuanClick(index) {
				this.isSelectLaiyuanId = index
			},
			xingzhiBtnClick() {
				if (this.xingzhiDataList.length > 0) {
					this.data.nature_id = this.xingzhiDataList[this.isSelectXingzhiId].id
					this.selectShiyongxingzhi = this.xingzhiDataList[this.isSelectXingzhiId].name
				}
				this.$refs.send_car_source_popup.close()
				this.$utils.log("dayin xuanze de xingzhi " + this.xingzhiDataList[this.isSelectXingzhiId].name)
			},
			xingzhiClick(index) {
				this.isSelectXingzhiId = index
			},
			getDate(e){
				console.log(e)
				if (this.selectClickInta == 3) {
					this.data.registration_time = e.fulldate 
					this.selectUpTime = e.fulldate
				}
				if (this.selectClickInta == 10) {
					this.data.insure_time = e.fulldate 
					this.selectBaoxianTime = e.fulldate 
				}
				if (this.selectClickInta == 11) {
					this.selectNianjianTime = e.fulldate 
					this.data.inspect_time = e.fulldate 
				}
			},
			getDate1(e) {
				if (this.selectClickInta == 3) {
					this.data.registration_time = e.value + ''
					this.selectUpTime = e.value + ''
				}
				if (this.selectClickInta == 10) {
					this.data.insure_time = e.value + ''
					this.selectBaoxianTime = e.value + ''
				}
				if (this.selectClickInta == 11) {
					this.selectNianjianTime = e.value + ''
					this.data.inspect_time = e.value + ''
				}
			},
			maskClickpopup() {},
			changePopup() {},
			//VIN相关方法
			inputPhone(event) {
				this.data.vin_code = event.target.value
				this.$utils.log(event.target.value)
			},
			inputPhoneRefer(event) {
				this.data.describe = event.target.value
				this.$utils.log(event.target.value)
			},
			//输入触发的方法
			meInputPhone(event, inta) {
				switch (inta + '') {
					case '8': {
						this.$utils.log("输入过户次数")
						this.data.transfer_ownership = event.target.value
					}
					case '9': {
						this.$utils.log("钥匙数量")
						this.data.key = event.target.value
					}
				}
			},
			meInputDigit(value, inta) {
				if (inta == 5) {
					this.$utils.log("输入里程")
					this.data.mileage = value
				} else if (inta == 6) {
					this.$utils.log("输入售价")
					this.data.price = value
				}
			},
			backData(obj) {
				console.log(obj)
				switch (obj.MID + "") {
					case "1": {
						this.$utils.log("选择品牌" + JSON.stringify(obj))
						this.data.brand_id = obj.brand_id
						this.data.series_one_id = obj.series_one_id //是String一级车系id
						this.data.series_two_id = obj.series_id //是String二级车系id
						

						if (obj.custom) { //自定义车型
							this.data.custom_name = obj.name
							this.data.version_id = obj.version_id
							this.data.model_one_id = ''
							this.data.model_two_id = '' //是String二级车型id
						} else {
							this.data.custom_name = ''
							this.data.model_one_id = obj.models_one_id //是String一级车型id
							this.data.model_two_id = obj.id //是String二级车型id
						}
						this.selectBrand = obj.name
						//选择的brand_id 品牌id来进行添加常用品牌 object.brand_id
						const data = {
							"users_id": "",
							"brand_id": "",
							"state": "3"
						}
						data.brand_id = obj.brand_id
						data.users_id = this.data.users_id
						var that = this
						commonBrandsAdd(data).then(res => {
							that.$utils.log("添加常用品牌返回的数据  " + JSON.stringify(res))
						})
						break;
					}
					case "2": {
						this.$utils.log("选择外观")
						this.data.appearance_name = obj.appearance_name //否String外观颜色
						this.data.appearance_color = obj.appearance_color //否String外观颜色色号
						this.data.interior_name = obj.interior_name //否String内饰颜色
						this.data.interior_color = obj.interior_color //否String内饰颜色色号
						this.selectColor = obj.appearance_name + '/' + obj.interior_name
						break;
					}
				}
				if (obj.selectInta == 4) {
					this.$utils.log("车辆所在地")
					this.data.where_province_id = obj.registration_province_id //是String车辆所在地省id
					this.data.where_city_id = obj.id //是String车辆所在地市id
					this.selectLocation = obj.registration_province + '/' + obj.name
				}
				if (obj.selectInta == 7) {
					this.$utils.log("选择上牌地区")
					this.data.registration_province_id = obj.registration_province_id //是String车辆所在地省id
					this.data.registration_city_id = obj.id //是String车辆所在地市id
					this.selectUpLocation = obj.registration_province + '/' + obj.name
				}

				//VIN 识别回传数据
				if (obj.IsVIN == true) {
					this.data.vin_code = obj.words
					this.inputValueVIN = obj.words
					this.$utils.log('打印 拍照识别 VIN返回的数据  ' + JSON.stringify(obj))
				}
			},
			//点击选择
			selectClick(inta) {
				this.$utils.log(" selectClick   " + inta)
				switch (inta + "") {
					case "1": {
						this.$utils.log("选择品牌")
						uni.navigateTo({
							url: '/pages/home/selectBrand/selectBrand?brand_type=search'
						})
						break;
					}
					case "2": {
						this.$utils.log("外观颜色")
						uni.navigateTo({
							url: '/pages/home/secondhandCar/selectColor/selectColor'
						})
						break;
					}
					case "3": {
						this.$utils.log("选择上牌时间")
						this.selectClickInta = inta
						//打开选择器
						// this.$refs.calendar1.open()
						this.$refs.calendar.open();
						break;
					}
					case "4": {
						this.$utils.log("车辆所在地")
						uni.navigateTo({
							url: '/pages/home/secondhandCar/selectLocation/selectLocation?selectInta=4'
						})
						break;
					}
					case "7": {
						this.$utils.log("上牌地")
						uni.navigateTo({
							url: '/pages/home/secondhandCar/selectLocation/selectLocation?selectInta=7'
						})
						break;
					}
					case "10": {
						this.$utils.log("选择保险购买时间")
						//打开选择器
						this.selectClickInta = inta
						// this.$refs.calendar1.open()
						this.$refs.calendar.open();
						break;
					}
					case "11": {
						this.$utils.log("上次年检时间")
						this.selectClickInta = inta
						// this.$refs.calendar1.open()
						this.$refs.calendar.open();
						break;
					}
					case "12": {
						this.$utils.log("使用性质")
						this.$refs.send_car_source_popup.open()
						break;
					}
					case "13": {
						this.$utils.log("车主来源")
						this.$refs.send_car_source_chezhulaiyuan_popup.open()
						break;
					}
				}
			},

			//上传
			chooseFile(e) {
				this.uploadFileToServe(e)
			},
			//中断上传并删除
			mediaDelete(e) {
				this.uploadTask ? this.uploadTask.abort() : ''
				this.media.splice(e, 1)
				this.data.cover_url.splice(e, 1)
				console.log("--------------" + JSON.stringify(this.media))
				console.log("--------------" + JSON.stringify(this.data.cover_url))
			},

			resetCoverUrl(data) {
				this.media = data;
				this.data.cover_url=data.map((item)=>{
					return item.path
				})
			},
			clicktoAll() {
				uni.navigateTo({
					url: '/secondhandCar/sendCarSource/images',
				})
				return
				let nMedia = this.media
				let nCover = this.data.cover_url

				let that = this
				uni.navigateTo({
					url: '/secondhandCar/sendCarSource/imagePreview',
					events: {
						// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
						acceptDataFromOpenedPage: function(data) {
							that.media = data.media
							that.data.cover_url = data.cover
						},
						someEvent: function(data) {
							console.log(data)
						}
					},
					success: function(res) {
						// 通过eventChannel向被打开页面传送数据
						let data = {
							"media": nMedia,
							"cover": nCover
						}
						res.eventChannel.emit('acceptDataFromOpenerPage', data)
					}
				})
			},

			//点击提交按钮进行发布二手车
			sendCarBtn() {
				this.pageupMeCarSource()
			},
			//页面发布
			pageupMeCarSource() {
				if (this.data.cover_url.length <= 0) {
					this.data.cover_url = ''
				}

				upMeCarSource(this.data).then(res => {
					if (res.code == 0) {
						uni.showToast({
							title: '发布车源成功',
							icon: 'none',
							duration: 2000
						})

						clearTimeout(this.timer); //清除延迟执行
						this.timer = setTimeout(() => { //设置延迟执行
							// 获取当前页上的栈（数组形式）
							var pages = getCurrentPages()
							//上一页面 
							var prevPage = pages[pages.length - 2]
							prevPage.$vm.backData({'isRefresh':true}) /// backData为A页面定义好的一个方法 调用该方法obj数据会返回到A页面backData方法中
							// 返回上一页
							uni.navigateBack()
						}, 1000);
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none',
							duration: 2000
						})
					}
				})
			},

			//上传逻辑处理
			uploadFileToServe(urlList) {
				if (!urlList || urlList.length <= 0) {
					return
				};
				urlList.forEach((item) => {
					var that = this
					this.uploadTask = uni.uploadFile({
						url: 'https://api.cst365.top/V1/common/uploadPictures',
						filePath: item.src,
						name: 'file',
						success: (res) => {
							let data = JSON.parse(res.data)
							if (!data.data.url) {
								item.status = 'error'
								item.progress = '上传失败'
							} else {
								item.status = 'success'
								item.progress = '上传成功'
								this.$utils.log("打印选择的item itemitemitemitem " + JSON.stringify(item))
								this.$utils.log("打印选择的resresresres  " + JSON.stringify(res))
								item.src = data.data.url
								item.path = data.data.path
								var str = JSON.stringify(item);
								const jsonObj = JSON.parse(str.replace(/\\\\\\\\/g, '\\'))

								this.$utils.log("打印选择的item" + JSON.stringify(jsonObj))
								that.data.cover_url.push(jsonObj.path)
							}
						}
					});
					this.uploadTask.onProgressUpdate((res) => {
						item.percent = res.progress
						this.media.splice(item.index, 1, item)
					})
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.media-container {
		padding: 20rpx 26rpx;
		box-sizing: border-box;
	}

	.text-view {
		font-size: 30rpx;
		font-family: Alimama ShuHeiTi;
		font-weight: bold;
		color: #000026;
		opacity: 1;
	}

	.VIN-code-box-class {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin: 30rpx 0rpx;
	}

	.VIN-code-text-class {
		flex: 1;
		text-align: left;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		opacity: 1;
	}

	.VIN-code-input-box {
		flex: 1;
		text-align: right;
		display: flex;
		flex-direction: row;
	}

	.VIN-code-image-class {
		width: 45.03rpx;
		height: 39.28rpx;
		margin-left: 15rpx;
	}

	.line {
		width: 100%;
		height: 3rpx;
		background-color: #eee;
	}

	.marleft {
		margin-left: 35rpx;
	}

	.marginText {
		margin-top: 20rpx;
		margin-bottom: 20rpx;
	}

	.inputClass {
		height: 180rpx;
		width: 95%;
		background-color: #eee;
		border-radius: 10rpx;
		text-align: left;
	}

	.pcs {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
		opacity: 1;
	}

	.input-send-car-class {
		width: 100%;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
		opacity: 1;
	}

	.chekuang-miaoshu-text-class {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		opacity: 1;
		margin-top: 38rpx;
		margin-left: 28rpx;
		margin-bottom: 20rpx;
	}

	.text-tare-view-class {
		width: 635rpx;
		height: 176rpx;
		background: #F4F4F4;
		opacity: 1;
		border-radius: 8rpx;
		margin-left: 28rpx;
		padding: 14rpx;
	}

	.textarea-pcs {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
		opacity: 1;
	}

	.tijiao-btn-send-car-source {
		height: 94rpx;
		background: #0E59EA;
		opacity: 1;
		border-radius: 14rpx;
		text-align: center;
		font-size: 32rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		line-height: 94rpx;
		color: #FFFFFF;
		opacity: 1;
		margin: 100rpx 30rpx;
	}

	.popup-content-view-box {
		width: 750rpx;
		height: auto;
		background: #FFFFFF;
		border-radius: 28rpx 28rpx 0rpx 0rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		/* 设置绝对定位 */
		position: absolute;
		/* 距离父元素上边缘  */
		bottom: -20rpx;
		z-index: 1;
		text-align: center;
	}

	.send-car-xingzhi_popup {
		width: 100%;
		height: 500rpx;
		background: #FFFFFF;
		border-radius: 28rpx 28rpx 0rpx 0rpx;
		display: flex;
		flex-flow: wrap;
		/* 设置绝对定位 */
		position: absolute;
		/* 距离父元素上边缘  */
		bottom: -20rpx;
		z-index: 1;
		text-align: left;
	}

	.send-car-xingzhi_popup-item-class {
		width: 160rpx;
		height: 54rpx;
		border: 2px solid #1C212514;
		border-radius: 28rpx;
		text-align: center;
		font-size: 26rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		line-height: 54rpx;
		color: #1C2125;
		margin: 5rpx;
	}

	.send-car-xingzhi_popup-item-class-select {
		flex: 1;
		width: 160rpx;
		height: 54rpx;
		border: 2px solid #0E59EA;
		opacity: 1;
		border-radius: 28rpx;
		text-align: center;
		font-size: 26rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		line-height: 54rpx;
		color: #0E59EA;
		opacity: 1;
		margin: 5rpx;
	}

	.shiyong-xingzhi-view-box {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		margin: 0rpx 20rpx;
	}

	.shiyong-xingzhi-title-view-class {
		width: 128rpx;
		height: 38rpx;
		font-size: 32rpx;
		font-family: Alimama ShuHeiTi;
		font-weight: bold;
		color: #1C2125;
		opacity: 1;
		width: 100%;
		text-align: center;
		margin-top: 60rpx;
	}

	.shiyong-xingzhi-btn-view-class {
		width: 654rpx;
		height: 94rpx;
		background: #0E59EA;
		opacity: 1;
		border-radius: 14rpx;
		text-align: center;
		font-size: 32rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		line-height: 94rpx;
		color: #FFFFFF;
		opacity: 1;
		margin-left: 48rpx;
	}

	.selected-header-box {
		white-space: nowrap;
		background-color: #fff;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		width: 100%;
	}

	.header_item_box {
		/* item的外层定义成行内元素才可进行滚动 inline-block / inline-flex 均可 */
		display: inline-flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.selected-view-box {
		width: 730rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 6rpx 12rpx rgba(0, 0, 0, 0);
		opacity: 1;
		margin: 0rpx 10rpx;
	}
</style>